<template>
	<div class="role">
		<div>
			<div class="upcoming-title" @click="todo">
				<div class="item">待办事项</div>
				<div class="item"> > </div>
			</div>
			<div class="upcoming" v-if="upcomingShow">
				<div class="item" @click="prototype">
					<div class="item-title">样机</div>
					<div class="item-content">{{upcoming.prototype}}</div>
				</div>
				<div class="item" @click="device">
					<div class="item-title">设备</div>
					<div class="item-content">{{upcoming.device}}</div>
				</div>
				<div class="item" @click="report">
					<div class="item-title">测试报告</div>
					<div class="item-content">{{upcoming.report}}</div>
				</div>
				<div class="item" @click="task">
					<div class="item-title">测试任务</div>
					<div class="item-content">{{upcoming.task}}</div>
				</div>
				<div class="item" @click="bug">
					<div class="item-title">缺陷管理</div>
					<div class="item-content">{{upcoming.bug}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { workbenchPending } from '@/api/user'
export default {
	name: 'myPrototype',
	data(){
		return {
			upcoming:{},
			upcomingShow:true
		}
	},
	created() {
		this.initData()
	},
	methods:{
		initData(){
			workbenchPending().then(res => {
				this.upcoming = Object.assign({},res.data.pending)
				console.log(res,1211)
			})
		},
		// 样机
		prototype(){
			if(this.upcoming.prototype > 0){
				this.$router.push({path:'/',query:{pending:true}})
			}
		},
		device(){
			if(this.upcoming.device > 0){
				this.$router.push({path:'/resourceManagement/device',query:{pending:true}})
			}
		},
		report(){
			if(this.upcoming.report > 0){
				this.$router.push({path:'/testingReport/index',query:{pending:true}})
			}
		},
		task(){
			if(this.upcoming.task > 0){
				this.$router.push({path:'/testTask',query:{pending:true}})
			}
		},
		bug(){
			if(this.upcoming.bug > 0){
				this.$router.push({path:'/bug/index',query:{pending:true}})
			}
		},
		todo(){
			this.upcomingShow = !this.upcomingShow
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 10px;
	.upcoming-title{
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color:rgb(255,148,96);
		color: #fff;
		height: 55px;
		line-height: 55px;
		font-size: 25px;
		padding:0 15px;
		cursor: pointer;
	}
	.upcoming{
		display: flex;
		justify-content: space-between;
		padding: 10px;
		.item{
			width: 18%;
			background-color: #fff;
			border: 1px solid #eee;
			cursor: pointer;
			.item-title{
				padding: 10px 0px 10px 40px ;
				border-bottom: 1px solid #eee;
				font-size: 16px;
			}
			.item-content{
				text-align: center;
				padding: 20px;
				font-size: 40px;
				color: rgb(255, 85, 0);
				//font-weight: 800;
			}
		}
	}
}
</style>
